<template>
	<view class="feedback">
		<view v-if="!isShow">
			<view class="star">
				<!-- <view style="margin-right: 20rpx">服务评价</view>
        <view>
          <u-rate size="42" inactive-color="#ededee" active-color="#fcba0e" colors="#f7f7f8" :count="count"
            v-model="value"></u-rate>
        </view> -->
			</view>
			<view style="background-color:#f7f7f8 ">
				<u-input :clearable="false" placeholder="请简要描述您的问题和建议" :custom-style="customStyle"
					v-model="feedbackData" type="textarea" :border="true" height="300" :auto-height="true" />
			</view>
			<view class="line">
				<view class="line-item"></view>
				<view style="margin: 0rpx 10rpx;font-size: 22rpx;">补充信息 (选填)</view>
				<view class="line-item"></view>
			</view>
			<u-button v-if="complainNum == 0" shape="circle" :custom-style="btnStyle" @click="submitComplain">提交投诉</u-button>
			<u-button v-else-if="complainNum == 1" shape="circle" :custom-style="btnStyle" @click="updateComplain">修改投诉</u-button>
		</view>

		<view v-else>
			<view style="background-color:#f7f7f8 ">
				<u-input :clearable="false" placeholder="感谢您的建议使我们的软件更加完善" :custom-style="customStyle"
					v-model="feedbackData" type="textarea" :border="true" height="300" :auto-height="true" />
			</view>
			<view class="line">
				<view class="line-item"></view>
				<view style="margin: 0rpx 10rpx;font-size: 22rpx;">补充信息 (选填)</view>
				<view class="line-item"></view>
			</view>
			<u-button shape="circle" :custom-style="btnStyle" @click="submitComplain">提交建议</u-button>
		</view>

	</view>
</template>

<script>
	import {postFeedback,getComplain,updateComplain} from "../../api/feedBack.js";

	export default {
		name: "index",
		onLoad(option) {
			if (option.tag == 'feedback') {
				this.feedbackType = 1
				this.isShow = true
			} else {
				let deliverData = JSON.parse(decodeURIComponent(option.data))
				this.orderId = deliverData.orderId
				this.getComplain()
			}

		},
		data() {
			return {
				orderId: '',
				// 反馈类型
				feedbackType: 0,
				// 投诉是否已投诉该订单
				complainNum: 0,
				count: 5,
				value: 0,
				customStyle: {
					backgroundColor: '#f7f7f8',
					color: '#9a9a9a'
				},
				btnStyle: {
					backgroundColor: '#1cd56c',
					marginTop: '40rpx',
					color: '#fff'
				},
				feedbackData: '',
				isShow: false,
			}
		},
		methods: {
			// await Axios.post("https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN", data)
			async submitComplain() {
				const res = await postFeedback({
					// type: 0,
					type: this.feedbackType,
					content: this.feedbackData,
					forderId: this.orderId,
				})

				if (res.data.code == 500) {
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: res.data.data,
						duration: 2000,
					});

					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						});
					}, 1000)
				}
				console.log(res.data);
			},
			async getComplain(){
				console.log(this.orderId);
				const res = await getComplain({
					forderId: this.orderId
				});
				console.log(res.data);
				if(res.data.data != null){
					this.complainNum = 1;
					this.feedbackData = res.data.data.content;
				}
				console.log(this.complainNum);
			},
			async updateComplain(){
				const res = await updateComplain({
					forderId: this.orderId,
					content: this.feedbackData,
				});
				console.log(res.data);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.feedback {
		color: #b8b8b8;
		min-height: 100vh;
		background-color: #fdfdfd;
		display: flex;
		padding: 20rpx 60rpx;
		flex-direction: column;

		.star {
			margin: 40rpx 0rpx;
			display: flex;
		}

		.line {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.line-item {
				background-color: #f8f8f9;
				flex: 1;
				height: 7rpx;
			}
		}
	}
</style>
